<!--
 * @Title: 分页
 * @Date: 2020-09-14 16:37:37
 * @FilePath: /vue-admin-template/src/components/pagination/index.vue
-->
<template>
  <div class="page-cut inline-block">
    <el-pagination class="inline-block"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  props:{
    total: { type: Number, default: 0 },
    currentPage: { type: Number, default: 1 },
    pageSize:{ type: Number, default: ()=> 10 }
  },
  name: 'PageCut',
  methods: {
    handleCurrentChange(val) {
      this.$emit('OnChange',val);
    }
  }
}
</script>
<style lang="scss" scoped>
inline-block{
  display: inline-block;
}
.page-cut{

 .el-pager li {
  border-top: 1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
  border-right: 1px solid #E4E4E4;
}
::v-deep.el-pagination .btn-next, ::v-deep.el-pagination .btn-prev {
  border-top: 1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
  border-right: 1px solid #E4E4E4;
}
::v-deep.el-pagination .btn-prev {
  border-left: 1px solid #E4E4E4;
}
::v-deep.el-pager li.active {
    color: #ffffff;
    cursor: default;
    background: #30b753;
}
::v-deep.el-pager li.active:hover {
    color: #ffffff;
}
::v-deep.el-pager li:hover {
    color: #30b753;
}
}

</style>
